<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>test</title>
    <!-- zui -->
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/zui.min.css">
    <link rel="stylesheet" type="text/css" href="css/doc.min.css">
    <style type="text/css">
		/*重置本页部分的zui样式*/
    	.row{margin: 0 0 10%}
		.form-control{background: transparent;border:0;box-shadow: none;}
		.form-control:focus{box-shadow: none;border:0;}
		.input-group-addon{background: transparent;border:0;}
		.btn{width: 100%;border-radius: 0;border:0;background: orange;color: #fff}
		.btn:focus{border:0;background: orange;color: #fff;box-shadow: none;}
		.btn:active{border:0;}
		.forget a:focus{text-decoration: none;}
    	/*新加样式*/
    	html{font-size: 20px}
    	header{text-align: center;padding:20% 0 3%}
    	.colorn{color: orange}
    	.colorm{color: #bbb}
		.input-group{background: #eee;border-radius: 3px}
		.module-tab{color: #f6dda4}
		.module-tab span{border-bottom: 1px solid #f6dda4;}
		.module-active{color: orange}
		.module-active span{border-bottom: 1px solid #f6dda4;}
		.forget{margin-top: 5%;}
		.forget a{border-bottom:1px solid #666;color: #666;}
    	.agree{color: #ccc}
		.agree span{border-bottom: 1px solid #ccc;color: #ccc}
    	.icon-mobile,.icon-credit,.icon-check{padding-right: .5em}
    	.my-user{background: url(images/user-name@2x.png) no-repeat left center;background-size: 100%}
    	.my-key{background: url(images/key@2x.png) no-repeat left center;background-size: 100%}
    </style>
</head>
<body class="hidden-md hidden-lg">
	<header><img src="images/lizi.png" style="width:14%"></header>
	<div class="grid">
		<div class="container">
			<div class="row input-group">
				<input type="text" class="form-control" placeholder="请输入手机号">
				<span class="input-group-addon my-user"><i class="icon"></i></span>
			</div>
			<div class="row input-group tab-phone">
				<input type="text" class="form-control" placeholder="请输入4位数验证码">
				<span class="input-group-addon"><i class="icon icon-mobile colorm"></i><span>发送验证码</span></span>
			</div>
			<div class="row input-group tab-password" style="display:none">
				<input type="text" class="form-control" placeholder="请输入密码">
				<span class="input-group-addon my-key"><i class="icon"></i></span>
			</div>
			<div class="row mode-tab">
				<div class="col col-xs-6">
					<span class="module-tab module-active">
						<i class="icon icon-mobile"></i>
						<span>手机验证登陆</span>
					</span>
				</div>
				<div class="col col-xs-6 text-right">
					<span class="module-tab">
						<i class="icon icon-credit"></i>
						<span>登陆密码登陆</span>
					</span>
				</div>
			</div>
			<div class="row agree"><i class="icon icon-check"></i><span>登陆即表示您同意用户协议</span></div>
		</div>
	</div>
	<footer>
		<button class="btn disabled" type="button">登陆</button>
		<div class="text-center forget"><a href="javascript:;">忘记密码</a></div>
	</footer>
	<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
	<script type="text/javascript">
		$(function(){
			//手机验证，密码验证切换
			$('.mode-tab .module-tab').each(function(){
				$(this).click(function(){
					if($(this).find('span').text() === '手机验证登陆'){
						$('.tab-phone').css('display','table');
						$('.tab-password').css('display','none');
					}else{
						$('.tab-phone').css('display','none');
						$('.tab-password').css('display','table');
					}
					$(this).addClass('module-active');
					$(this).parent().siblings().find('span').eq(0).removeClass('module-active');
				})
			})
			//判断登陆按钮是否可用
			$('input').each(function(){
				$(this).bind('input propertychange',function(){
					var bool = ($('input').eq(0).val() != '' && $('input').eq(1).val() != '') || ($('input').eq(0).val() != '' && $('input').eq(2).val() != '');
					if(bool){
						$('.btn').removeClass('disabled');
					}else{
						$('.btn').addClass('disabled');
					}
				})
			})
		})
	</script>
</body>
</html>